<template>
    <view>
        <view class="add-address">
            <view class="add-address-item">
                <view class="add-address-item-left">收货人：</view>
                <view style="width:70%">
                    <input type="text" v-model="addressInfo.contacts" placeholder="请输入收货人姓名" placeholder-style="color:#999999;font-size:28rpx;" style="color:#333;font-size:28rpx" v-if="JSON.stringify(addressInfo) != '{}'">
                    <input type="text" placeholder="请输入收货人姓名" placeholder-style="color:#999999;font-size:28rpx;" style="color:#333;font-size:28rpx" @change="nameChange" v-else>
                </view>
            </view>
            <view class="add-address-item">
                <view class="add-address-item-left">联系电话：</view>
                <view style="width:70%">
                    <input type="text" v-model="addressInfo.phone" placeholder="请输入收货人联系电话" placeholder-style="color:#999999;font-size:28rpx;" style="color:#333;font-size:28rpx" v-if="JSON.stringify(addressInfo) != '{}'">
                    <input type="text" placeholder="请输入收货人联系电话" placeholder-style="color:#999999;font-size:28rpx;" style="color:#333;font-size:28rpx" @change="phoneChange" v-else>
                </view>
            </view>
            <view class="add-address-item">
                <view class="add-address-item-left">所在地区：</view>
                <view style="width:70%;display:flex;justify-content:space-between;">
                    <view style="width:100%;color:#999999;font-size:28rpx" @tap="openAddres" v-if="pickerText == ''">请选择</view>
                    <view style="width:100%;color:#333;font-size:28rpx" @tap="openAddres" v-else>{{pickerText}}</view>
                    <view class="iconfont icon-xiangyou"></view>
                    <w-picker 
                        mode="region"
                        :defaultVal="pickerDefault"
                        :hideArea="false"
                        @confirm="onConfirm" 
                        ref="region" 
                        themeColor="#24C79C">
                    </w-picker>
                </view>
            </view>
            <view class="add-address-item">
                <view class="add-address-item-left">具体地址：</view>
                <view style="width:70%">
                    <input type="text" v-model="addressInfo.full_address" placeholder="请输入具体地址" placeholder-style="color:#999999;font-size:28rpx;" style="color:#333;font-size:28rpx" v-if="JSON.stringify(addressInfo) != '{}'">
                    <input type="text" placeholder="请输入具体地址" placeholder-style="color:#999999;font-size:28rpx;" style="color:#333;font-size:28rpx" @change="addressChange" v-else>
                </view>
            </view>
            <view class="address-default">
                <checkbox-group @change="checkboxChange">
                    <checkbox value="cb" color="#24C79C" style="transform:scale(0.7)" :checked="addressInfo.is_default === 1"/>设为默认
                </checkbox-group>
            </view>
        </view>
        <view class="bottom">
            <view class="save" @tap="save">保存</view>
        </view>
    </view>
</template>

<script>
import wPicker from "@/components/w-picker/w-picker.vue";
import { UserModel } from '../../model/user';
const userModel = new UserModel()
export default {
    components: {
        wPicker
    },
    data() {
        return {
            regex_phone: getApp().globalData.regex_phone,
            picker: {},
            pickerText: '',
            phone: '',
            detailedAddress: '',
            name: '',
            isDefault: 0,
            addressInfo: {},
            pickerDefault: []
        }
    },
    methods: {
        // 三级联动选择
        openAddres() {
            // this.$refs.mpvueCityPicker.show()
            this.$refs.region.show()
        },
        onConfirm(e) {
            this.picker = e
            this.pickerText = e.result
            console.log(e)
        },
        onCancel() {

        },
        nameChange(e) {
            this.name = e.detail.value
        },
        phoneChange(e) {
            this.phone = e.detail.value
        },
        addressChange(e) {
            this.detailedAddress = e.detail.value
        },
        checkboxChange(e) {
            if(e.detail.value.length == 1) {
                this.isDefault = 1
            }else if(e.detail.value.length == 0) {
                this.isDefault = 0
            }
        },
        save() {
            if(JSON.stringify(this.addressInfo) != '{}') {
                if(this.addressInfo.contacts == '') {
                    uni.showToast({
                        title: '收货人为必填项',
                        icon: 'none'
                    })
                }else if(!(this.regex_phone).test(this.addressInfo.phone)) {
                    uni.showToast({
                        title: '联系电话输入有误',
                        icon: 'none'
                    })
                }else if(this.pickerText == '') {
                    uni.showToast({
                        title: '请选择地区',
                        icon: 'none'
                    })
                }else if(this.addressInfo.full_address == '') {
                    uni.showToast({
                        title: '请输入详细的联系地址',
                        icon: 'none'
                    })
                }else {
                    // let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
                    console.log(this.picker)
                    let id = this.addressInfo.id
                    let data = {
                        contacts: this.addressInfo.contacts,
                        phone: this.addressInfo.phone,
                        area_code: JSON.stringify(this.picker) == '{}' ? this.addressInfo.area_code : this.picker.checkValue[2],
                        full_address: this.addressInfo.full_address,
                        is_default: this.isDefault,
                        // user_id: 10,
                        province: JSON.stringify(this.picker) == '{}' ? this.addressInfo.province : this.picker.checkArr[0],
                        city: JSON.stringify(this.picker) == '{}' ? this.addressInfo.city : this.picker.checkArr[1],
                        area: JSON.stringify(this.picker) == '{}' ? this.addressInfo.area : this.picker.checkArr[2]
                    }
                    console.log(data)
                    userModel.editAdress(data, id).then((res) => {
                        console.log(res)
                        if(res.code == 201) {
                            uni.showToast({
                                title: res.msg,
                                icon: 'success'
                            })
                            // uni.navigateTo({
                            //     url: '/pagesD/shipping-address/shipping-address'
                            // })
                            uni.navigateBack({
                                delta: 1
                            })
                        }
                    })
                }
            }else {
                if(this.name == '') {
                    uni.showToast({
                        title: '收货人为必填项',
                        icon: 'none'
                    })
                }else if(!(this.regex_phone).test(this.phone)) {
                    uni.showToast({
                        title: '联系电话输入有误',
                        icon: 'none'
                    })
                }else if(this.pickerText == '') {
                    uni.showToast({
                        title: '请选择地区',
                        icon: 'none'
                    })
                }else if(this.detailedAddress == '') {
                    uni.showToast({
                        title: '请输入详细的联系地址',
                        icon: 'none'
                    })
                }else {
                    let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
                    let data = {
                        contacts: this.name,
                        phone: this.phone,
                        area_code: this.picker.checkValue[2],
                        full_address: this.detailedAddress,
                        is_default: this.isDefault,
                        // user_id: userInfo.id,
                        province: this.picker.checkArr[0],
                        city: this.picker.checkArr[1],
                        area: this.picker.checkArr[2],
                    }
                    console.log(data)
                    userModel.addUserAddress(data).then((res) => {
                        if(res.code == 201) {
                            uni.showToast({
                                title: res.msg,
                                icon: 'success'
                            })
                            // uni.navigateTo({
                            //     url: '/pagesD/shipping-address/shipping-address'
                            // })
                            uni.navigateBack({
                                delta: 1
                            })
                        }
                    })
                }
            }
        }
    },
    onLoad(option) {
        if(JSON.stringify(option) != '{}') {
            this.addressInfo = JSON.parse(option.addressInfo)
            this.pickerText = this.addressInfo.province + this.addressInfo.city + this.addressInfo.area
            this.isDefault = this.addressInfo.is_default
            this.pickerDefault.push(this.addressInfo.province)
            this.pickerDefault.push(this.addressInfo.city)
            this.pickerDefault.push(this.addressInfo.area)
            console.log(this.pickerDefault)
        } 
    }
}
</script>

<style>
    page {
        background: #ffffff;
    }
    .add-address {
        padding: 37rpx 46rpx 0rpx 39rpx;
    }
    .add-address-item {
        display: flex;
        justify-content: left;
    }
    .add-address-item-left {
        width: 200rpx;
        height: 125rpx;
        color: #333333;
        font-size: 28rpx;
    }
    checkbox .wx-checkbox-input {
        border-radius: 50%;
        border: 1rpx solid #24C79C;
    }
    .address-default {
        color: #333333;
        font-size: 28rpx;
        line-height: 46rpx;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 140rpx;
        background:rgba(255,255,255,1);
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.1);
    }
    .save {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 28rpx auto 0rpx;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
    }
</style>